<template>
  <div>
    <div class="headButton">
      <span class="title">{{'项目需求-'}}<a @click.prevent="goBack" class="back-class" href="#">项目详情</a></span>
      <el-button style="margin-left:10px" type="success" icon="el-icon-circle-plus-outline" size="small"
                 @click="add">新需求
      </el-button>
    </div>
    <search-component :colum="colum" :formValue="formValue"
                      class="search" @exportBtn="exportBtn"
                      @search="search" @reset="reset" ref="search">
    </search-component>
    <vxe-grid
        border
        context-menu
        highlight-hover-row
        :scroll-y="{gt: -1}"
        resizable
        :data="tableData"
        :pager-config="pagerConfig"
        @page-change="pageChangeChange">
      <vxe-table-column field="Level" title="级别" align="center" :width="'72px'" sortable>
        <template v-slot="{ row }">
          <el-tag :type="tagType[row.Level-1]">
            {{ statusFilterOptions(row.Level, 'LEVEL') }}
          </el-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Name" title="名称" :min-width="'250px'" sortable>
        <template v-slot="{ row }">
          <a class="link-name" @click.prevent="editDetil(row)" :href="linkName(row)"><span>{{row.Name}}</span></a>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Username" title="创建人" width="100" sortable></vxe-table-column>
      <vxe-table-column field="Acceptname" title="指派人" width="90" sortable></vxe-table-column>
      <vxe-table-column field="Tasktime" title="预工时" width="90" sortable></vxe-table-column>
      <vxe-table-column field="Created" title="创建日期" :formatter="formatDate" width="100" sortable ></vxe-table-column>
      <vxe-table-column field="Status" title="状态" align="center" :width="'90px'" sortable>
        <template v-slot="{ row }">
          <span>{{ statusFilterOptions(row.Status, 'NEEDS_STATUS') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Stage" title="阶段" width="120" sortable>
        <template v-slot="{ row }">
          <span>{{ statusFilterOptions(row.Stage, 'NEEDS_STAGE') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Opear" title="操作" width="160px" align="center" fixed="right">
        <template v-slot="{ row }">
<!--          <vxe-button status="primary" @click="assigned(row)" size="small">任务</vxe-button>-->
          <vxe-button status="primary" @click="editDetil(row)" size="small">编辑</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-grid>
  </div>
</template>

<script>
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import DictionarySelect from "@/components/element/select/DictionarySelect";
import SelectProjectModule from "@/components/element/select/SelectProjectModule";
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import SelectDepart from "@/components/element/select/SelectDepart";
import projectNeedApi from "@/api/organizationApi/projectNeedApi";
import {mapGetters} from "vuex";
import { formatDateString } from '@/utils/date'
import { downFile } from '@/api/downloadApi.js'
import qs from 'qs'
export default {
  name: 'NeedManageList',
  components: {
    searchComponent,
    SelectProjectTeam
  },
  mounted() {
    let a = ''
    if (this.$router.currentRoute.params.pid) {
      this.$set(this.formValue, 'testno', this.$router.currentRoute.params.pid)
      a = '1'
    }
    this.search(a)
  },
  // activated() {
  //   let a = ''
  //   if (this.$router.currentRoute.params.pid) {
  //     this.$set(this.formValue, 'testno', this.$router.currentRoute.params.pid)
  //     a = '1'
  //   }
  //   this.search(a)
  // },
  computed: {
    ...mapGetters(['dictionary']),
    statusList() {
      return (DictTypeCode) => {
        return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
      }
    },
    linkName () {
      return (row) => {
        let a = {
          id: row.Id,
          preId: this.$route.params.id
        }
        let b = qs.stringify(a, { indices: false })
        let hp = window.location.protocol
        let host = window.location.host
        return `${hp}//${host}/view/test/show/?${b}`
      }
    },
    statusFilterOptions() {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => {
          return it.DictId === (cellValue || '').toString()
        })
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    }
  },
  data() {
    return {
      tagType: ['danger', 'warning', 'info', 'success'],
      fullscreenLoading: false,
      editModel: 'C',
      formData: {},
      modalVisible: false,
      editData: {},
      editVisible: false,
      addData: {},
      addVisible: false,
      tabPosition: '',
      formValue: {
        p: 1,
        pageoffset: 15
      },
      colum: [
        {
          placeholder: '请选择状态',
          prop: 'status',
          size: 'small',
          dictTypeCode: 'NEEDS_STATUS',
          componentName: DictionarySelect,
          value: 'status',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择阶段',
          prop: 'stage',
          size: 'small',
          dictTypeCode: 'NEEDS_STAGE',
          componentName: DictionarySelect,
          value: 'stage',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择指派人',
          selectTitle: '指派人',
          prop: 'acceptid',
          size: 'small',
          componentName: SelectProjectTeam,
          value: 'acceptid',
          ref: 'acceptid',
          clearable: true,
          show: true,
          attrs: {
            multiple: true,
            column: [
              { field: 'Userrealname' }
            ],
            showValueShow: []
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请输入名称',
          prop: 'keywords',
          componentName: 'vxe-input',
          type: 'integer',
          min: 0,
          value: 'keywords',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        }
      ],
      tableData: [],
      // toolbar: {
      //   slots: {
      //     buttons: 'toolbar-buttons'
      //   },
      // },
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10, 15, 20, 50, 100]
      }
    }
  },
  methods: {
    goBack () {
      this.$router.push(`/view/project/details/${this.$route.params.id}`)
    },
    // 导出
    exportBtn () {
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let id = this.$route.params.id
      let a = JSON.parse(JSON.stringify(this.formValue))
      a.id = this.$route.params.id
      projectTestApi.getExport(a).then(res => {
        downFile(res)
      }).finally(_ => {
        this.fullscreenLoading.close()
      })
    },
    // editDetil (row) {
    //   // this.editData = JSON.parse(JSON.stringify(row))
    //   // this.editVisible = true
    //   this.$router.push(`/view/test/show/${row.Id}`)
    // },
    editDetil(row) {
      let a = {
        id: row.Id,
        preId: this.$route.params.id
      }
      let b = qs.stringify(a, { indices: false })
      if (this.$route.params.id) {
        this.$router.push({
          path: `/view/project/neededit?${b}`
        })
      }
    },
    add() {
      let a = {
        id: '',
        preId: this.$route.params.id
      }
      let b = qs.stringify(a, { indices: false })
      if (this.$route.params.id) {
        this.$router.push({
          path: `/view/project/neededit?${b}`
        })
      }
    },
    assigned(row) {
      this.formData = {
        acceptid: '',
        Id: row.Id,
        note: ''
      }
      this.modalVisible = true
    },
    search(a) {
      if (this.$route.params.id) {
        this.tableData = []
        let query1 = Object.assign({id: this.$route.params.id}, this.formValue)
        let query = JSON.parse(JSON.stringify(query1))
        if (query.createStarted) {
          query.createStarted = query.createStarted / 1000
        }
        if (query.createEnd) {
          query.createEnd = query.createEnd / 1000
        }
        if (query.createStarted && query.createEnd && query.createStarted === query.createEnd) {
          query.createEnd = query.createEnd + (60 * 60 * 24)
        }
        projectNeedApi.getPage(query).then(res => {
          if (res && res.Needs) {
            this.tableData = res.Needs;
            this.pagerConfigFun(res)
            if (this.$router.currentRoute.params.pid && a === '1') {
              if (this.tableData.length > 0) {
                this.editDetil(this.tableData[0])
              }
            }
          } else if (null === res.Needs) {
            this.tableData = []
            this.pagerConfigFun(res)
          } else {
            this.$message.error(res.message);
          }
        }).catch(() => this.$message.error('获取需求列表失败'));
      }
    },
    reset() {
      this.formValue = {
        p: 1,
        pageoffset: 15
      }
    },
    pagerConfigFun(res) {
      this.pagerConfig.currentPage = res.Page
      this.formValue.p = this.pagerConfig.currentPage
      this.pagerConfig.total = res.Total
    },
    pageChangeChange(pageConfig) {
      this.formValue.p = pageConfig.currentPage
      this.pagerConfig.currentPage = pageConfig.currentPage
      this.formValue.pageoffset = pageConfig.pageSize
      this.pagerConfig.pageSize = pageConfig.pageSize
      this.search()
    },
    formatDate ({ cellValue }) {
      let a = formatDateString(cellValue * 1000, 'yyyy-MM-dd hh:mm:ss')
      if (a.indexOf('1970-01-01') >= 0 ) {
        return ''
      }
      return a
    }
  }
}
</script>
<style>
.headButton {
  text-align: right;
  padding-bottom: 10px;
}

.headButton .title {
  float: left;
  font-width: normal;
  font-size: 20px;
}

.link-name {
  color: #65CEA7;
}
.back-class {
  color: #00d1b2;
}
.link-name:hover {
  color: #353F4F;
  cursor: pointer;
}
</style>
